<% content_for(:head) do %>
  <title>Calendar | <%= @course.name %></title>
<% end %>
<% content_for(:inner_wrapper) do %>
  <script id="react-root-data" type="application/json"></script>
  <div class="relative md:h-screen md:flex overflow-y-auto">
    <div class="max-w-6xl w-full mx-auto px-4 md:pt-18 pb-20 md:pb-6">
      <h2 class="md:pt-4 font-semibold">Calendar</h2>
      <div class="mt-2 grid md:grid-cols-12 gap-4 rounded-lg relative pb-6">
        <div class="md:col-span-5 lg:col-span-4">
          <div class="p-3 md:p-6 pb-0 md:pb-0 border border-gray-200 rounded-lg sticky top-24 bg-gray-50">
            <div id="course-calendar-picker" class="md:pb-4 " >
              <div data-re-component="CalendarsIndex__DatePicker" data-re-json=<%=@presenter.date_picker_props%>></div>
            </div>
          </div>
        </div>
        <div class="md:col-span-7 lg:col-span-8 bg-gray-50 border border-gray-200 md:bg-white flex-1 rounded-lg">
          <div class="flex gap-4 items-center justify-between bg-gray-100 md:bg-gray-50 rounded-t-lg px-3 py-2 md:p-6">
            <p class="text-lg font-semibold"><%= t('.events')%></p>
          </div>
          <div class="flex flex-col gap-4 divide-y p-3 md:p-6">
            <div>
              <div>
                <p class="font-semibold text-sm text-gray-600"><%=@presenter.selected_date%>
                  <% if @presenter.today? %>
                    <span aria-hidden="true"></span>- </span> <em class="font-normal"><%= t('.today')%></em>
                <% end %>
              </p>
              <% if @presenter.events_for_day.blank? %>
                <div class="mt-2 md:mt-3 flex flex-col items-center text-center p-2 md:p-6 bg-gray-100 md:bg-gray-50 rounded-lg">
                  <p><i class="if i-calendar-solid if-fw text-3xl lg:text-7xl text-gray-300"></i></p>
                  <p class="text-sm font-semibold mt-2 md:mt-4"><%= t('.no_events_text')%></p>
                </div>
              <% end %>
            </div>
            <div>
              <div class="mt-3 flex flex-col gap-4 md:gap-6">
                <% @presenter.events_for_day.each do |event|%>
                  <%= render partial: "event_card", locals: {event: event} %>
                <% end %>
              </div>
            </div>
          </div>
          <% if @presenter.upcoming_events_for_month.present? %>
            <div id="upcoming-events" class="pt-4">
              <p class="font-semibold text-sm text-gray-600"><%= t('.upcoming_events', month: @presenter.selected_month) %></p>
              <div>
                <div class="mt-3 flex flex-col gap-6">
                  <% @presenter.upcoming_events_for_month.each do |event|%>
                    <%= render partial: "event_card", locals: {event: event} %>
                  <% end %>
                </div>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
<% end %>
